import React, { useCallback, useEffect, useState } from "react";
import {
  Space,
  Table,
  Tag,
  Button,
  Form,
  Input,
} from "antd";
import { useNavigate } from "react-router-dom";
import instance from '../../api/request'

interface DataType {
  key: string;
  title: string;
  updatedAt: string;
  viewCount: number;
  tags: string[];
  id: number;
  content: string;
}

const Index: React.FC = () => {
  const navigate = useNavigate();

  const [tabelData, setTabelData] = useState<DataType[]>([]);
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "文章标题",
      dataIndex: "title",
      key: "title",
      render: (text, record) => (
        <span onClick={() => navigate(`/detail?id=${record.id}`)}>{text}</span>
      )
    },
    {
      title: "阅读量",
      dataIndex: "viewCount",
      key: "viewCount",
    },
    {
      title: "内容",
      dataIndex: "content",
      key: "content",
    },
    {
      title: "发布时间",
      dataIndex: "updatedAt",
      key: "updatedAt",
    },
    {
      title: "标签",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            return <Tag key={tag.name}>{tag.name.toUpperCase()}</Tag>;
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button>修改</Button>
          <Button>删除</Button>
        </Space>
      ),
    },
  ];
  const [tabelTotal, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [title, setTitle] = useState("");
  const [tag, setTag] = useState("");
  const [searchForm] = Form.useForm();
  const loadTable = () => {
    const params: {
      page: number;
      pageSize: number;
      keyword?: string;
      tag?: string;
    } = { page, pageSize };
    if (title) params.keyword = title;
    if (tag) params.tag = tag;

    instance.get("/article/list", { params }).then((res) => {
      if (res.data.rows) {
        setTabelData(res.data.rows);
        setTotal(res.data.count);
      }
    });
  };
  const onSearch = (values) => {
    setTitle(values.title);
    setTag(values.tag);
  };
  const resetSearch = () => {
    searchForm.resetFields();
    setTitle("");
    setTag("");
  };
  useEffect(() => {
    loadTable();
  }, [page, pageSize, title, tag]);

  const pageChange = useCallback(
    (currentPage: number, currentPageSize: number) => {
      setPage(currentPage);
      setPageSize(currentPageSize);
    }, []
  );
  return (
    <div>
      <Form
        name="basic"
        layout="inline"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        onFinish={onSearch}
        form={searchForm}
      >
        <Form.Item label="标题" name="title">
          <Input />
        </Form.Item>

        <Form.Item label="标签" name="tag">
          <Input />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" onClick={resetSearch}>
            重置
          </Button>
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>

      <Table<DataType>
        columns={columns}
        dataSource={tabelData}
        rowKey="id"
        pagination={{
          total: tabelTotal,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `总共 ${total} 条`,
          position: ["bottomCenter"],
          onChange: pageChange,
        }}
      />
    </div>
  );
};

export default Index;
